<template>
  <div class="auth-container">
    <div class="auth-decoration"></div>

    <div class="auth-card">
      <h2 class="auth-title">实名认证</h2>

      <form @submit.prevent="handleSubmit" class="auth-form">
        <!-- 姓名 -->
        <div class="form-group">
          <label>真实姓名</label>
          <input
            v-model="formData.name"
            type="text"
            placeholder="请输入与身份证一致的真实姓名"
            @input="validateName"
            :class="{ error: errors.name }"
          />
          <span class="error-msg">{{ errors.name }}</span>
        </div>

        <!-- 身份证号 -->
        <div class="form-group">
          <label>身份证号码</label>
          <input
            v-model="formData.idNumber"
            type="text"
            placeholder="请输入18位身份证号码"
            @input="validateIdNumber"
            :class="{ error: errors.idNumber }"
          />
          <span class="error-msg">{{ errors.idNumber }}</span>
        </div>

        <!-- <div class="form-group">
          <label>从业场所编号</label>
          <input
            v-model="formData.workplaceNumber"
            type="text"
            placeholder="请输入8位数字字母组合编号"
            @input="validateWorkplaceNumber"
            :class="{ error: errors.workplaceNumber }"
          />
          <span class="error-msg">{{ errors.workplaceNumber }}</span>
        </div> -->
        <div class="form-group">
          <label>从业场所编号</label>
          <select
            v-model="formData.workplaceNumber"
            @change="validateWorkplaceNumber"
            :class="{
              error: errors.workplaceNumber,
              'placeholder-color': formData.workplaceNumber == '',
            }"
            class="custom-select"
          >
            <option value="" disabled>请选择从业场所</option>
            <option
              v-for="(option, index) in workplaceOptions"
              :key="index"
              :value="option.value"
            >
              {{ option.label }} ({{ option.value }})
            </option>
          </select>
          <span class="error-msg">{{ errors.workplaceNumber }}</span>
        </div>

        <button type="submit" class="submit-btn" :disabled="isSubmitting">
          {{ isSubmitting ? "正在加载..." : "提交认证" }}
        </button>
      </form>
    </div>
  </div>
</template> 

<script>
import api from "@/api";

export default {
  name: "AuthPage",
  data() {
    return {
      formData: {
        name: "",
        idNumber: "",
        workplaceNumber: "",
      },
      errors: {
        name: "",
        idNumber: "",
        workplaceNumber: "",
      },
      isSubmitting: false,
      workplaceOptions: [
        { value: "BJ01001", label: "北京第一律师事务所" },
        { value: "SH02002", label: "上海正义法律服务中心" },
        { value: "GZ03003", label: "广州法治实践基地" },
        { value: "SZ04004", label: "深圳涉外法律事务所" },
        { value: "CD05005", label: "成都西部法律援助中心" },
      ],
    };
  },
  methods: {
    validateName() {
      const isValid = /^[\u4e00-\u9fa5]{2,10}$/.test(this.formData.name);
      this.errors.name = isValid ? "" : "请输入2-10位中文姓名";
      return isValid;
    },
    validateIdNumber() {
      const reg =
        /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])\d{3}[\dXx]$/;
      this.errors.idNumber = reg.test(this.formData.idNumber)
        ? ""
        : "身份证格式不正确";
      return reg.test(this.formData.idNumber);
    },
    // validateWorkplaceNumber() {
    //   const isValid = /^[A-Z0-9]{8}$/.test(this.formData.workplaceNumber);
    //   this.errors.workplaceNumber = isValid ? "" : "请输入有效的8位编号";
    //   return isValid;
    // },
    validateWorkplaceNumber() {
      const isValid = this.formData.workplaceNumber !== "";
      this.errors.workplaceNumber = isValid ? "" : "请选择从业场所";
      return isValid;
    },

    triggerFileUpload() {
      this.$refs.fileInput.click();
    },
    handleFileUpload(e) {
      const file = e.target.files[0];
      if (file) {
        if (!file.type.startsWith("image/")) {
          this.errors.photo = "仅支持图片格式";
          return;
        }
        if (file.size > 2 * 1024 * 1024) {
          this.errors.photo = "文件大小不能超过2MB";
          return;
        }
        const reader = new FileReader();
        reader.onload = (e) => {
          this.formData.photo = e.target.result;
          this.errors.photo = "";
        };
        reader.readAsDataURL(file);
      }
    },
    validateAll() {
      return [
        this.validateName(),
        this.validateIdNumber(),
        this.validateWorkplaceNumber(),
      ].every((v) => v);
    },
    async handleSubmit() {
      if (!this.validateAll()) return;
      this.isSubmitting = true;
      this.login();
    },
    async login() {
      try {
        const result = await api.auth.login({
          uname: this.formData.name,
          uidcard: this.formData.idNumber,
          bh: this.formData.workplaceNumber,
        });
        console.log(result);
        this.isSubmitting = false;
        localStorage.setItem("userInfo", JSON.stringify(result.data));
        this.$router.push("/exam"); // 修改跳转路径
      } catch (err) {
        console.error("请求失败:", err.message);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.auth-container {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  position: relative;
  overflow: hidden;
}

/* 动态背景 */
.auth-decoration {
  position: absolute;
  width: 80vmin;
  height: 80vmin;
  background: linear-gradient(
    45deg,
    var(--primary) 0%,
    var(--primary-light) 100%
  );
  opacity: 0.08;
  animation: gradient-rotate 20s linear infinite;
  border-radius: 30% 70% 67% 33% / 30% 30% 70% 70%;
}

@keyframes gradient-rotate {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.2);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* 玻璃拟态卡片 */
.auth-card {
  position: relative;
  width: 80%;
  max-width: 480px;
  background: var(--background);
  backdrop-filter: blur(16px);
  border-radius: 1.5rem;
  padding: 2.5rem;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1),
    inset 0 0 12px rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transform: translateZ(0);
}

.auth-title {
  text-align: center;
  color: var(--text);
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 2.5rem;
  position: relative;
}

.auth-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--primary);
  margin: 1.2rem auto 0;
  border-radius: 2px;
}

/* 表单通用样式 */
.auth-form {
  display: grid;
  gap: 2rem;
}

.form-group {
  position: relative;
}

label {
  display: block;
  color: var(--text-light);
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 0.8rem;
}

input {
  width: 100%;
  padding: 0.9rem 0;
  padding-left: 1.2rem;
  border: 2px solid var(--border);
  border-radius: 0.8rem;
  background: rgba(245, 248, 250, 0.6);
  font-size: 1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

input:focus {
  border-color: var(--primary);
  background: white;
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.15);
  transform: scale(1.02);
}

input::placeholder {
  color: #c0c4cc;
}

/* 日期选择组 */
.date-group {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.date-separator {
  color: var(--text-light);
  padding: 0 0.5rem;
}

/* 文件上传区域 */
.upload-area {
  position: relative;
  border: 2px dashed var(--border);
  border-radius: 0.8rem;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 150px;
  display: grid;
  place-items: center;
}

.upload-area:hover {
  border-color: var(--primary);
  background: rgba(74, 144, 226, 0.03);
}

.upload-prompt {
  text-align: center;
  color: var(--text-light);
  font-size: 0.95rem;
}

.preview-image {
  width: 100%;
  height: auto;
  max-height: 300px;
  border-radius: 0.6rem;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.preview-image:hover {
  transform: scale(1.02);
}

/* 提交按钮 */
.submit-btn {
  width: 100%;
  padding: 1.1rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border: none;
  border-radius: 0.8rem;
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;

  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.5px; /* 增加字间距提升可读性 */
}

.submit-btn:hover {
  color: #f8f9fa !important;
  box-shadow: 0 4px 20px rgba(255, 109, 0, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2); /* 添加内边框效果 */
}

.submit-btn::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 45%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0) 55%
  );
  transform: rotate(45deg);
  animation: shine 2.5s infinite;
}

.submit-btn:hover {
  box-shadow: 0 6px 20px rgba(74, 144, 226, 0.3);
  transform: translateY(-2px);
}

.submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  animation: none;
}

/* 错误提示 */
.error-msg {
  display: block;
  color: #ff4d4f;
  font-size: 0.85rem;
  margin-top: 0.5rem;
  height: 1.2rem;
  opacity: 0;
  transform: translateY(-5px);
  transition: all 0.3s ease;
}

.error-msg:not(:empty) {
  opacity: 1;
  transform: translateY(0);
}

input.error {
  border-color: #ff4d4f;
  animation: shake 0.4s ease;
}

/* 动画效果 */
@keyframes shine {
  0% {
    left: -50%;
  }
  100% {
    left: 150%;
  }
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(6px);
  }
  75% {
    transform: translateX(-6px);
  }
}

/* 响应式设计 */
@media (max-width: 480px) {
  .auth-card {
    padding: 1.5rem;
    border-radius: 1rem;
  }

  .date-group {
    grid-template-columns: 1fr;
  }

  .date-separator {
    display: none;
  }
}
.custom-select {
  width: 100%;
  padding: 0.9rem 1.2rem;
  border: 2px solid var(--border);
  border-radius: 0.8rem;
  background: rgba(245, 248, 250, 0.6);
  font-size: 1rem;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1em;
  color: var(--text); /* 默认使用主题颜色 */
}

/* 添加空值状态下的颜色 */
.custom-select[value=""],
.placeholder-color {
  color: #c0c4cc;
}
// 添加禁用选项的样式
.custom-select option:disabled {
  color: #c0c4cc;
}
// 确保正常选项的颜色
.custom-select option {
  color: var(--text); /* 使用主题文本颜色 */
}

.custom-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.15);
}
</style>